<template>
    <page-body>
        <view class="page">
            <view class="flex flex-direction flex-wrap align-stretch justify-center benben-position-layout flex report_flex_0" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex flex-wrap align-stretch justify-between report_fd0_0'>
                    <view class='flex flex-wrap align-center report_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                        <text class='fu-iconfont2  report_fd0_0_c0_c0'>&#xe794;</text>
                    </view>
                    <view class='flex flex-wrap align-center'>
                        <text class='report_fd0_0_c1_c0'>举报商家</text>
                    </view>
                    <view class='flex align-center justify-end report_fd0_0_c2'>
                    </view>
                </view>

            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---意见反馈表单flex布局开始-->
            <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout report_flex_1">
                <view class='flex flex-wrap align-center justify-between report_fd1_0'>
                    <text class='report_fd1_0_c0'>举报类型</text>
                </view>
                <view class='flex flex-direction flex-wrap align-stretch report_fd1_1'>
                    <benben-select-diy ref="showSelectPopup1686796312520" class-name='flex flex-wrap align-center flex' :items.sync="changeType" v-model="changeId" 
					default-type="title" default-label="title" :allow-cancel='true' type="radio" :disabled='false'>
                        <template v-for='(item,key0) in changeType'>
                            <view v-if="item.isSelected" class='flex align-center justify-center flex report_fd1_1_c0_c0' :key="key0" @tap="$refs.showSelectPopup1686796312520.tapHandle(key0)">
                                <text class='flex-sub report_fd1_1_c0_c0_c0'>{{item.title}}</text>
                            </view>
                            <view v-else class='flex align-center justify-center flex report_fd1_1_c0_c1' :key="key0" @tap="$refs.showSelectPopup1686796312520.tapHandle(key0)">
                                <text class='flex-sub report_fd1_1_c0_c1_c0'>{{item.title}}</text>
                            </view>
                        </template>
                    </benben-select-diy>
                </view>
                <view class='flex flex-wrap align-center report_fd1_2'>
                </view>
                <text class='report_fd1_3'>举报内容</text>
                <view class='flex flex-direction flex-wrap align-stretch'>
                    <view class='flex flex-wrap report_fd1_4_c0'>
                        <textarea class='flex report_input_fd1_4_c0' confirm-type="done" :placeholder="'问题描述的越详细，有助于我们更快的解决问题'" :maxlength="240" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="input1" />

                    </view>
                    <view class='flex flex-direction flex-wrap align-stretch'>
                        <benben-images-upload ref="benbenImagesUploadfd1_4_c1_c0" :img-list.sync="input2" :is-show-tips='true' :maxlength="1">
                            <template #content="{ num, maxlength, isShow}">
                                <view class="flex flex-wrap align-start flex report_fd1_4_c1_c0">

                                    <view v-for="(image, index) in input2" :key="index" class='flex position-relative report_fd1_4_c1_c00'>
                                        <text class='fu-iconfont2 position-absolute report_fd1_4_c1_c000' @tap.stop="$refs.benbenImagesUploadfd1_4_c1_c0.delImage(index)">&#xE8E7;</text>
                                        <image class='report_fd1_4_c1_c001' @tap.stop="$refs.benbenImagesUploadfd1_4_c1_c0.previewImage(index)" mode="aspectFill" :src='image'></image>
                                    </view>

                                    <image class='report_fd1_4_c1_c01' @tap.stop="$refs.benbenImagesUploadfd1_4_c1_c0.manyChooseImage()" v-if="input2.length == 0" mode="aspectFit" :src='STATIC_URL+"34.png"'></image>
                                    <text class='image_upload_tips report_fd1_4_c1_c02'>最多上传{{maxlength}}张图片</text>
                                </view>
                            </template>
                        </benben-images-upload>
                    </view>
                </view>
                <view class='flex flex-wrap align-center report_fd1_2'>
                </view>
                <text class='report_fd1_6'>请留下您的联系方式</text>
                <view class='flex flex-wrap align-center report_fd1_7'>
                    <benben-input class='flex-sub report_fd1_7_c0' type="text" :placeholder="`手机号/邮箱/QQ号`" confirm-type="done" :maxlength="-1" :adjust-position='true' placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="input3" />
                </view>
            </view>

            <!---意见反馈表单flex布局结束-->
            <view class="flex flex-wrap align-center justify-center benben-position-layout flex report_flex_2" @tap.stop="getdx4745f0927b1dFunc">
                <button class='flex-sub report_fd2_0'>提交</button>

            </view>
            <view :style="{height: '88rpx'}"></view>


        </view>
    </page-body>
</template>
<script>
    import {
        validate
    } from '@/common/utils/validate.js'

    export default {
        components: {},


        data() {
            return {
                "changeId": "",
                "changeType": [],
                "input1": "",
                "input2": [],
                "input3": "",
                "aid": ""
            };
        },
        computed: {

        },
        watch: {},
        onLoad(options) {
            let {
                aid
            } = options
            if (aid !== undefined) this.aid = aid
			this.getpv4745def58c58Func()
        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {
            
            
        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {

        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
            //举报类型
            async getpv4745def58c58Func() {
                //请求方法
                //数据验证

                let datachangeType = await this.$api.get(global.apiUrls.post64745def58c58, {

                });

                if (datachangeType.data.code != 1) {
                    this.$message.info(datachangeType.data.msg);
                    return
                }
                let infochangeType = datachangeType.data;
                this.changeType = infochangeType.data

            },
            //举报商家
            async getdx4745f0927b1dFunc() {
                if (!validate(this.changeId, 'require')) {
                    this.$message.info('请选择举报类型');
                    return false;
                }
                if (!validate(this.input1, 'require')) {
                    this.$message.info('请填写举报内容');
                    return false;
                }
                //请求方法
                //数据验证

                let data64745f0927b1d = await this.$api.dbPost(global.apiUrls.post64745f0927b1d, {
                    type: this.changeId,
                    body: this.input1,
                    thumb: this.input2.toString(),
                    contact: this.input3,
                    userstore_id: this.aid
                });
                if (!data64745f0927b1d) return
                if (data64745f0927b1d.data.code != 1) {
                    this.$message.info(data64745f0927b1d.data.msg);
                    return
                }
                let info64745f0927b1d = data64745f0927b1d.data;


                uni.showToast({
                    title: '提交成功！',
                    mask: true,
                    icon: 'none',
                    duration: 1500
                });
                setTimeout(() => {
                    this.$urouter.navigateBack(1);
                }, 500)
            }
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: #fff;
        background-size: 100% auto;
    }

    .report_flex_0 {
        background: #fff;
        width: 750rpx;
        height: 88rpx;
        overflow: hidden;
        z-index: 10;
        top: 0rpx;
        background-size: 100% auto !important;
    }

    .report_fd0_0_c2 {
        padding: 0rpx 0rpx 0rpx 0rpx;
        width: 200rpx;
    }

    .report_fd0_0_c1_c0 {
        font-size: 36rpx;
        font-weight: 500;
        color: #333333;
        line-height: 50rpx;
    }

    .report_fd0_0_c0_c0 {
        font-size: 36rpx;
        font-weight: 400;
        color: #333;
    }

    .report_fd0_0_c0 {
        width: 200rpx;
    }

    .report_fd0_0 {
        padding: 0rpx 32rpx 0rpx 32rpx;
        line-height: 88rpx;
    }

    .report_flex_1 {
        background: #fff;
        background-size: 100% auto !important;
    }

    .report_fd1_7_c0 {
        font-size: 28rpx;
        font-weight: 400;
        color: #333;
    }

    .report_fd1_7 {
        border-bottom: 1px solid #eee;
        padding: 24rpx 32rpx 24rpx 32rpx;
    }

    .report_fd1_6 {
        margin: 40rpx 32rpx 16rpx 32rpx;
        color: #1A1A1A;
        font-size: 32rpx;
        font-weight: 500;
        line-height: 45rpx;
    }

    .report_fd1_4_c1_c02 {
        font-size: 24rpx;
        color: rgba(191, 191, 191, 1);
        font-weight: 400;
        margin: 0rpx 0rpx 32rpx 0rpx;
    }

    .report_fd1_4_c1_c01 {
        width: 180rpx;
        height: 180rpx;
        margin: 0rpx 24rpx 24rpx 0rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
    }

    .report_fd1_4_c1_c001 {
        width: 180rpx;
        height: 180rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
    }

    .report_fd1_4_c1_c000 {
        top: 0rpx;
        right: 0rpx;
        z-index: 10;
        color: #ff5536;
    }

    .report_fd1_4_c1_c00 {
        margin: 0rpx 24rpx 24rpx 0rpx;
    }

    .report_fd1_4_c1_c0 {
        padding: 24rpx 0rpx 0rpx 32rpx;
    }

    .report_input_fd1_4_c0 {
        width: 100%;
        height: 166rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #333;
    }

    .report_fd1_4_c0 {
        width: 686rpx;
        margin: 0rpx 0rpx 0rpx 32rpx;
        padding: 0rpx 0rpx 24rpx 0rpx;
    }

    .report_fd1_3 {
        font-size: 32rpx;
        font-weight: 500;
        color: #1A1A1A;
        margin: 32rpx 32rpx 32rpx 32rpx;
    }

    .report_fd1_2 {
        background: rgba(246, 247, 249, 1);
        height: 20rpx;
        background-size: 100% auto;
    }

    .report_fd1_1_c0_c1_c0 {
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
        line-height: 40rpx;
    }

    .report_fd1_1_c0_c1 {
        border: 1px solid rgba(191, 191, 191, 1);
        background: var(--benbenbgColor1);
        margin: 0rpx 16rpx 32rpx 16rpx;
        height: 64rpx;
        border-radius: 8rpx;
        padding: 0rpx 47rpx 0rpx 47rpx;
    }

    .report_fd1_1_c0_c0_c0 {
        font-size: 28rpx;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 40rpx;
    }

    .report_fd1_1_c0_c0 {
        background: var(--benbenbgColor0);
        margin: 0rpx 16rpx 32rpx 16rpx;
        height: 64rpx;
        border-radius: 8rpx;
        padding: 0rpx 47rpx 0rpx 47rpx;
    }

    .report_fd1_1 {
        padding: 0rpx 15rpx 0rpx 15rpx;
    }

    .report_fd1_0_c0 {
        font-size: 32rpx;
        font-weight: 500;
        color: #1A1A1A;
        line-height: 45rpx;
    }

    .report_fd1_0 {
        padding: 32rpx 32rpx 32rpx 32rpx;
    }

    .report_flex_2 {
        width: 750rpx;
        height: 88rpx;
        overflow: hidden;
        z-index: 10;
        bottom: calc(48rpx + var(--window-bottom));
    }

    .report_fd2_0 {
        background: var(--benbenbgColor0);
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        font-size: 32rpx;
        color: #fff;
        margin: 0rpx 32rpx 0rpx 32rpx;
        height: 88rpx;
        line-height: 88rpx;
    }
</style>